<template>
  <!-- 客户案例 -->
  <div class="customer-case pl-10 w-82 flex flex-col justify-between">
    <LoginFormTitle :title="t('sys.login.customerCase')" class="enter-x" />
    <div class="text-cool-gray-400 enter-x">{{ t('sys.login.customerCaseDes') }}</div>
    <List class="enter-x" :grid="{ gutter: 16, column: 4 }" :data-source="data.slice(0, 8)">
      <template #renderItem="{ item }">
        <ListItem>
          <div class="customer-case-item w-16 h-16 mx-auto my-auto">
            <img :src="item" alt="" />
          </div>
        </ListItem>
      </template>
    </List>
    <ARow class="enter-x">
      <Button type="primary" size="large" block>联系我们：138 5566 7788</Button>
    </ARow>
  </div>
</template>

<script setup lang="ts">
  import { List, ListItem, Row, Button } from 'ant-design-vue';
  import { ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import LoginFormTitle from './LoginFormTitle.vue';

  const imgs = import.meta.globEager('@/assets/images/case-img/*.*');
  const { t } = useI18n();

  const ARow = Row;

  const data = ref<string[]>([]);

  for (const key in imgs) {
    if (Object.prototype.hasOwnProperty.call(imgs, key)) {
      const element = imgs[key];
      data.value.push(element.default);
    }
  }
</script>

<style scoped lang="less">
  .customer-case {
    border-left: 1px dotted #ddd;

    &-item {
      border-radius: 50%;
    }
  }

  html[data-theme='dark'] {
    .customer-case {
      border-left: 1px dotted #232a3b;
    }
  }
</style>
